<script setup lang="js">
// 引入naive-ui
import {NSkeleton, NGrid, NGridItem} from "naive-ui";
</script>

<template>
  <n-grid :cols="2" :x-gap="20">
    <n-grid-item v-for="i in 2" :key="i">
      <section class="bg-white shadow rounded p-5 flex items-stretch mb-5">
        <n-skeleton width="108px" height="138px"  class="rounded flex-shrink-0"/>
        <div class="flex flex-col pl-5 flex-1">
          <n-skeleton width="50%" height="30px" class="my-2"/>
          <div class="mt-auto flex items-center">
            <div class="flex items-end">
              <n-skeleton width="30px" text/>
              <n-skeleton width="30px" class="ml-2"/>
            </div>
            <n-skeleton width="100px" circle size="medium" class="ml-auto"/>
          </div>
        </div>
      </section>
    </n-grid-item>
  </n-grid>

</template>
<style scoped> 

</style>